<template>
	<view class="bg-white flex flex-direction" style="width: 100vw;height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<text>我的已购</text>
			</block>
		</cu-custom>
		<!-- 课程，文章作品展示 -->
		<view class="flex flex-direction flex-sub">
		<view class="flex align-center justify-around solids-bottom" style="padding: 32rpx 0;font-size: 32rpx;">
			<!-- <view v-for="(item,index) in tablist" :key="index"
				:style="{'color': currentIndex==index?'#007AFF':'#333333'}" @click="change(index)">{{item.columnName}}</view> -->
			<view v-for="(item,index) in tablist" :key="index"
				:style="{'color':'#333333'}" @click="change(index)">{{item.columnName}}</view>
		</view>
		<swiper @change="onSwiperchange" :current="currentIndex"
			style="padding: 0 32rpx;touch-action: none;" class=" flex-sub">
			<swiper-item v-for="(item,index) in tablist" :key="index" style="width: 100%;height: 100%; " >
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-if="curlist && isShow" v-for="(content,index2) in curlist" :key="index2" style="padding-top: 48rpx;">
							<articleCell :art="content" v-if="content.columnType=='1'"></articleCell>
							<courseCell :course="content" v-if="content.columnType=='2'"></courseCell>
							<journalCell :journal="content"  v-if="content.columnType=='3'"></journalCell>
							<bookCell :book="content" v-if="tablist[currentIndex].columnValue=='book'"></bookCell>
						<view class="flex bg-white" style="margin-top: 16rpx 0;width: 100%;">
							<!-- 评论 -->
							<view class="flex-sub flex flex-direction  align-center margin-top-sm">
								<text @click="toggleMask('show');currentContent=content" class="text-black cuIcon-comment " style="font-size: 50rpx;"></text>
								<text>{{content.commentCount}}</text>
							</view>
							<!-- 点赞 -->
							<view class="flex-sub  flex flex-direction  align-center margin-top-sm" @click="like(content)">
								<text :class="[content.isLike?' text-blue cuIcon-appreciatefill':'text-black cuIcon-appreciate']" style="font-size: 50rpx;"></text>
								<text>{{content.likeCount}}</text>
							</view>
							<!-- 收藏 -->
							<view class="flex-sub  flex flex-direction  align-center margin-top-sm" @click="favorite(content)">
								<text :class="[content.isFavorite?' text-blue cuIcon-likefill':'text-black cuIcon-like']" style="font-size: 50rpx;"></text>
								<text>{{content.favoriteCount}}</text>
							</view>
						</view>
					</view>
					<view v-if="!curlist || curlist.length<1" class="flex justify-center" style="margin-top: 40rpx; font-size: 40rpx;">
						还没有购买{{tablist[currentIndex].columnName}}呢
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		</view>
		<ygc-comment ref="ygcComment"
		    :placeholder="'发布评论'" 
			@pubComment="pubComment"></ygc-comment>
	</view>

</template>

<script>
	import articleCell from '../../components/my-like-or-favorite-list/article-cell.vue';
	import courseCell from '../../components/my-like-or-favorite-list/course-cell.vue';
	import journalCell from '../../components/my-like-or-favorite-list/journal-cell.vue';
	import bookCell from '../../components/my-like-or-favorite-list/book-cell.vue';
	import ygcComment from '../../components/comment/ygc-comment.vue';
	import articleApi from '../../api/articleApi.js';
	export default {
		components: {
			articleCell, courseCell, journalCell, bookCell, ygcComment
		},
		data() {
			return {
				isShow: true,
				tablist: [{
					  "id": "2",
					  "columnName": "课程",
					  "columnValue": "course",
					  "gmtCreate": "2021-04-25 16:35:57",
					  "gmtModified": "2021-04-25 16:36:01"
					}
				  ],
				currentIndex: this.$Route.query.currentIndex ? this.$Route.query.currentIndex:0,
				curlist: [{}, {}],
				userId: this.$store.getters.userid,
				constantID: "0000000000000000000",
				targetComment: {},
				currentContent: {}
			}
		},
		onShow() {
			this.getColumnData();
		},
		methods: {
			change(index) {
				this.currentIndex = index;
			},
			onSwiperchange(e) {
				this.currentIndex = e.detail.current;
				this.getColumnData();
			},
			getColumnData(){
				this.isShow = false;
				this.$http.post('/eduorder/order/purchasedList', {
					userId: this.userId,
					columnType: this.tablist[this.currentIndex].id
				}).then((res) => {
					this.curlist = res.data.result;
					if(this.tablist[this.currentIndex].columnValue=='article'){
						this.curlist.forEach((item) => {
							item["imglist"] = item.cover.split(",");
							delete item.cover;
						})						
					}
				}).finally(() => {
					this.isShow = true;
				});
			},
			favorite(content){
				content.isFavorite = !content.isFavorite;
				if(content.isFavorite){	//收藏
					content.favoriteCount++;
					this.$http.post('/edu/favorite/favoriteContent', 
					{
						contentId: content.contentId,
						userId: this.userId,
						columnType: content.columnType
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)	
						}else {
							console.log(data.message);
						}
					}).catch(err => {
						console.log(err);
					});
				} else{	//取消收藏
					content.favoriteCount--;
					this.$http.post('/edu/favorite/unfavoriteContent',
					{
						contentId: content.contentId,
						userId: this.userId,
						columnType: content.columnType
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)	
						}else {
							console.log(data.message);
						}
					}).catch(err => {
						console.log(err);
					});
				}
			},
			like(content){
				content.isLike = !content.isLike;
				if(content.isLike){	//点赞
					content.likeCount++;
					this.$http.post('/edu/like/likeContent', 
					{
						contentId: content.contentId,
						userId: this.userId,
						columnType: content.columnType
					}).then(res=>{
						let data = res.data;
						if(data.success){
							this.$tip.success(data.message);
						}else {
							console.log(data.message);
						}
					}).catch(err => {
						console.log(err);
					});
				} else{	//取消点赞
					content.likeCount--;
					this.$http.post('/edu/like/dislikeContent',
					{
						contentId: content.contentId,
						userId: this.userId,
						columnType: content.columnType
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}else {
							console.log(data.message);
						}
					}).catch(err => {
						console.log(err);
					});
				}
			},
			toggleMask(type) {
				this.$refs.ygcComment.toggleMask(type);
			},
			handlePublish: function(item) {
				this.targetComment = item;
				this.toggleMask("show");
			},
			pubComment(commentContent) {
				this.$refs.ygcComment.toggleMask();
				this.$refs.ygcComment.content = '';
				let constantID = this.constantID;
				//向后端添加评论
				let comment = {
					userId: this.userId,
					parentCommentId: JSON.stringify(this.targetComment) == "{}" ? constantID: (this.targetComment.parentCommentId==constantID?this.targetComment.commentId:this.targetComment.parentCommentId),
					targetCommentId: JSON.stringify(this.targetComment) == "{}" ? constantID: (this.targetComment.parentCommentId==constantID?constantID:this.targetComment.commentId),
					targetUserId: JSON.stringify(this.targetComment) == "{}" ? '' : (this.targetComment.parentCommentId==constantID?'':this.targetComment.userId),
					contentId: this.currentContent.contentId,
					columnType: this.tablist[this.currentIndex].id,
					content: commentContent
				}
				articleApi.addComment(comment).then(res=>{
					this.$tip.success('评论成功!');
					this.$Router.replace({name: 'myLike', params:{currentIndex: this.currentIndex}})
				})
			},
		}
	}
</script>

<style>
</style>
